<script setup lang="ts">
import { useMemberStore, useDeviceStore } from '@/stores'
import sleppStatus from '@/components/sleepStatus.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const getInfo = () => {
  if (memberStore.profile) {
    deviceStore.getDeviceList()
  }
}
onLoad(() => {
  getInfo()
})

const draw = (e: any) => {
  if (deviceStore.deviceList) {
    const deviceId = deviceStore.deviceList[e.detail.index].id
    const isInBed = deviceStore.deviceList[e.detail.index].isInBed
    const heart = deviceStore.deviceList[e.detail.index].heart
    const breath = deviceStore.deviceList[e.detail.index].breath
    const deviceNum = deviceStore.deviceList[e.detail.index].deviceNum
    uni.navigateTo({
      url: `/pages/index/index-detail?deviceId=${deviceId}&isInBed=${isInBed}&heart=${heart}&breath=${breath}&deviceNum=${deviceNum}`,
    })
  }
}
const isRefresh = ref(false)
const onRefresh = async () => {
  isRefresh.value = true
  await deviceStore.getDeviceList()
  isRefresh.value = false
}
</script>
<template>
  <view class="container">
    <scroll-view
      scroll-y
      class="scroll-view"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefresh"
      v-if="memberStore.profile"
    >
      <view style="padding: 2rpx">
        <uni-grid :column="3" @change="draw">
          <uni-grid-item v-for="(item, index) in deviceStore.deviceList" :key="index" :index="index">
            <!-- 参数不完全对应，不用v-bind传对象 -->
            <sleppStatus
              :item="{ isInBed: item.isInBed, deviceNum: item.deviceNum, heart: item.heart, breath: item.breath }"
            />
          </uni-grid-item>
        </uni-grid>
        <view class="test"></view>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
page {
  height: 100vh;
  font-family: PingFangSC-regular;
  overflow: hidden;
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    .scroll-view {
      height: calc(100vh - 115.385rpx - 34.615rpx - 28.846rpx);
      overflow: hidden;
      padding-top: 28.846rpx;
      .test {
        width: 38.462rpx;
        height: 38.462rpx;
        background: url(@/static/breath.png) no-repeat;
      }
      .uni-grid-item {
        height: 288.462rpx !important ;
      }
      .whole {
        height: 288.462rpx;
        font-size: 26.923rpx;
        image {
          width: 28.846rpx;
          height: 28.846rpx;
          margin-right: 9.615rpx;
        }
        .offbed {
          background: linear-gradient(to right, #ffff, #d9e8bd);
        }
        .inbed {
          background: linear-gradient(to right, #ffff, #bbdaf1);
        }
        .address {
          width: 100%;
          height: 69.231rpx;
          display: flex;
          .bed-number {
            width: 65%;
          }
          .data {
            width: 35%;
            font-size: 26.923rpx;
            .heart {
              height: 50%;
              display: flex;
              align-items: center;
            }
            .breathe {
              height: 50%;
              display: flex;
              align-items: center;
            }
          }
        }
        .statusInbed {
          width: 100%;
          height: (288.462rpx - 69.231rpx);
          background: url(@/static/sleep.png) no-repeat center center;
          background-size: contain;
          background-color: #5fa4df;
        }
        .statusOffbed {
          width: 100%;
          height: (288.462rpx - 69.231rpx);
          background: url(@/static/offbed.png) no-repeat center center;
          background-size: contain;
          background-color: #bad87e;
        }
      }
    }
  }
}
</style>
